<template>
  <div class="user_info">
    <form action="JavaScript:;" method="post" class="info_form">
      <div class="title_nav">
        <h3 style="color:gray">个人信息</h3>
        <div>
          <input type="button" value="保存" @click="updateUserInfo" v-show="!isPerfect">
          <input type="button" value="编辑" v-if="isPerfect" @click="isPerfect = false">
          <input type="button" value="取消" v-else @click="isPerfect = true">
        </div>
      </div>
      <div class="info">
        <div class="head_portrait">
          <label for="picture">
            <img :src="info.picture" v-layz>
            <p>更换头像</p>
          </label>
          <input ref="picture" @change="uploadPicture" type="file" accept="image/x-png,image/jpeg" id="picture" v-show="false">
        </div>
        <ul class="info_text">
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xingming"></use>
            </svg>
            <span>用户名：</span>
            <input v-model="info.name" :class="isPerfect ? '':'inputActive'" type="text"  :disabled="isPerfect">
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-nianling"></use>
            </svg>
            <span>年龄：</span>
            <input v-model="info.age" type="number"  disabled>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xingbie"></use>
            </svg>
            <span>性别：</span>
            <select class="sex" v-model="info.sex" v-if="!isPerfect">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
            <span v-else>{{info.sex}}</span>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xingzuo"></use>
            </svg>
            <span>星座：</span>
            <input v-model="info.constellation" type="text"  disabled>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shengri"></use>
            </svg>
            <span>生日：</span>
            <input @change="changeBirthday" v-model="info.birthday" :class="isPerfect ? '':'inputActive'" type="date" min="1970-01-01" max="2021-01-01" :disabled="isPerfect">
          </li>
        </ul>
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import tool from '../../assets/js/tool'
export default {
  name: 'UserInfo',

  data() {
    return {
      info: { // 个人信息
        name: '',
        sex: '',
        age: '',
        constellation:'',
        birthday: '',
        picture: ''
      }, 
      isPerfect: true, // 是否修改
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.info = this.$store.state.userinfo
    },
    // 由生日生成星座和年龄
    changeBirthday(){
      let birthday = this.info.birthday.split('-')
      let date = new Date()
      this.info.age = date.getFullYear() - parseInt(birthday[0])
      this.info.constellation = tool.GetConstellation(birthday[1]+birthday[2])
    },
    // 修改个人信息
    updateUserInfo(){
      this.$api.updateUserInfo(this.info).then(res => {
        if(res instanceof Object){
          this.showHint({title:'保存成功',isFlag: true})
          this.isPerfect = true
          this.info = {...res}
        }else{
          this.showHint({title:res,isFlag:false})
        }
      })
    },
    // 修改头像
    uploadPicture(){
      let file = this.$refs.picture.files[0]
      this.$api.uploadPicture({picture:file}).then(res => {
        this.info.picture = res + '?t=' + Math.random()
        this.showHint({title:'修改成功!',isFlag:true})
      })
    },
    ...mapActions(['showHint'])
  },
};
</script>

<style scoped>
.user_info .info_form{
  display: flex;
  flex-direction: column;
}
.user_info .info{
  display: flex;
  padding: 20px;
  background-image: url('../../assets/image/userBG.jpg');
  background-size: 100% 100%;
}
.user_info .info img{
  width: 66px;
  height: 66px;
  margin: 5px 0;
}
.user_info .info .info_text input{
  background-color: transparent;
  border: none;
  outline: none;
  transition: all .3s ease;
}
.user_info ul{
  display: flex;
  flex-wrap: wrap;
  flex: 8;
}
.user_info ul li{
  width: 250px;
  height: 50px;
  display: flex;
  align-items: center;
}
.user_info ul li span{
  white-space: nowrap;
}
.user_info .info_text input.inputActive{
  height: 30px;
  border: 1px solid gray;
  padding: 5px;
  background-color: white;
}
.user_info .info_text input.inputActive:focus{
  border: 1px solid aqua;
  box-shadow: 0 0 2px aqua;
}
.head_portrait{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.5rem;
  text-align: center;
}
.head_portrait p{
  cursor: pointer;
}
.info .sex{
  outline: none;
  width: 60px;
}
@media screen and (max-width: 800px){
  .user_info{
    padding: 10px;
    
  }
  .user_info ul{
    margin-left: 10px;
  }
  .user_info ul li{
    width: 100%;
  }
  .user_info ul li input{
    width: 140px;
  }
}
</style>